<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

// 1. 使用 watch 监听一个响应式数据
const count = ref(100)
// 只监听一个
// watch(count, (newValue, oldValue) => {
//   console.log(newValue, oldValue)
// })

const user = reactive({
  name: 'tom',
  info: {
    gender: '男',
    age: 18
  }
})
// 监听两个
watch([count, user], (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

// 2s后count加一
setTimeout(() => {
  count.value++
}, 2000)

// 4s后user.info.age加一
setTimeout(() => {
  user.info.age++
}, 4000)
</script>

<template>
  <div class="app-page">
    <div>{{ count }}</div>
    <button @click="count++">变</button>
  </div>
</template>

<style lang="css" scoped></style>
